Notices.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. "use client";
  2. import { GlobalNoticeRep, updateGlobalNoticeApi, updateUserNoticeApi } from "@/api/home";
  3. import Box from "@/components/Box";
  4. import Empty from "@/components/Empty";
  5. import { timeFormat } from "@/utils/methods";
  6. import { Badge, Collapse } from "antd-mobile";
  7. import { useLocale } from "next-intl";
  8. import { useState } from "react";
  9. import style from "./style.module.scss";
  10. interface Props {
  11. data: GlobalNoticeRep[];
  12. type: "system" | "user";
  13. }
  14. const SystemMessage = (props: Props) => {
  15. const { data, type } = props;
  16. const locale = useLocale();
  17. const [noticesData, setNoticesData] = useState<GlobalNoticeRep[]>(data);
  18. const collapseChange = (active: string | null) => {
  19. if (!active) return;
  20. const isRead = noticesData.find((item) => item.id === +active)?.is_read;
  21. if (isRead) return;
  22. const newNotices = noticesData.map((item) => {
  23. if (item.id === +active && !item.is_read) {
  24. return { ...item, is_read: true };
  25. } else {
  26. return item;
  27. }
  28. });
  29. if (type === "system") {
  30. updateGlobalNoticeApi(+active).then((r) => {});
  31. } else {
  32. updateUserNoticeApi(+active);
  33. }
  34. setNoticesData(newNotices);
  35. };
  36. if (!noticesData.length) return <Empty />;
  37. return (
  38. <div className={style.messageCollapse}>
  39. <Collapse accordion onChange={collapseChange}>
  40. {noticesData.map((notice, index) => (
  41. <Collapse.Panel
  42. key={`${notice.id}`}
  43. title={
  44. <section>
  45. <header className={"flex items-center"}>
  46. <h6 className={""}>{notice.content?.title}</h6>
  47. <Badge
  48. className={`ml-[0.1rem] h-[0.06rem] w-[0.06rem]`}
  49. style={{ "--color": "#f0dc00" }}
  50. content={!notice.is_read ? Badge.dot : ""}
  51. ></Badge>
  52. </header>
  53. <p className={"text-[12px] text-[#64676d]"}>
  54. {notice.send_time
  55. ? timeFormat(notice.send_time!, locale)
  56. : timeFormat(notice.send_user_time!, locale)}
  57. </p>
  58. </section>
  59. }
  60. >
  61. <div>
  62. <p className={"text-[16px] text-[#c1c6d2]"}>{notice.content?.text}</p>
  63. <img src={notice.content?.image} alt="" />
  64. <div
  65. className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.006rem] border-[#454545] text-[#64676d]`}
  66. >
  67. <Box action={notice.action_type} actionData={notice.action_params}>
  68. <p className={"text-[0.1111rem]"}>{notice.content?.word}</p>
  69. </Box>
  70. <span
  71. className={"iconfont icon-xiangyou2 ml-[5px] text-[0.08rem]"}
  72. ></span>
  73. </div>
  74. </div>
  75. </Collapse.Panel>
  76. ))}
  77. </Collapse>
  78. </div>
  79. );
  80. };
  81. export default SystemMessage;